<div id="register" class="login_wrapper">
	<section class="login_content">
		<form action="javascript:void(0);">
			<h1>Create Account</h1>
			<div>
				<input type="text" class="form-control" placeholder="Username"
					   required="" v-model:value="user.userName" />
			</div>
			<div>
				<input type="email" class="form-control" placeholder="Email"
					   required="" v-model:value="user.email" />
			</div>
			<div>
				<input type="password" class="form-control" placeholder="Password"
					   required="" v-model:value="user.password"/>
			</div>
			<div>
				<a class="btn btn-default submit" href="javascript:void(0);"
				   @click="register()">Submit</a>
			</div>

			<div class="clearfix"></div>

			<div class="separator">
				<p class="change_link">
					Already a member ? <a href="/login" class="to_register"> Log in </a>
				</p>

				<div class="clearfix"></div>
				<br />

				<div>
					<h1>
						<i class="fa fa-paw"></i> Spring Boot
					</h1>
					<p>©2016 All Rights Reserved. Spring Boot! use a Bootstrap 3 template.</p>
				</div>
			</div>
		</form>
	</section>
</div>

<script type="text/javascript">
	var userVue = new Vue({
		el: "#register",
		data: {
			user: {
				email: "",
				userName: "",
				password: "",
			}
		},
		methods: {
			register: function () {
				var self = this;
				$.ajax({
					url : "/api/user",
					type : "post",
					contentType: "application/json",
					data : JSON.stringify(self.user),
					success : function (rs) {
						if (rs.status == 200) {
							location.href = "/login";
						} else {
							layer.msg(rs.message, {icon: 0});
						}
					},
					error : function (rs) {
						layer.msg(rs.responseText, {icon: 0});
					}
				});
			}
		},
	});
</script>